/* copied from metabase/query_builder/components/view/ViewHeader/ViewTitleHeader.module.css */

.FilterButton {
  &[data-variant="default"] {
    transition: background 300ms linear;

    &:hover {
      color: var(--mb-color-filter);
      background-color: color-mix(
        in srgb,
        var(--mb-color-filter) 10%,
        var(--mb-color-white)
      );
    }
  }
}

.FilterButtonAttachment {
  &[data-variant="default"] {
    padding: 0.5rem;
    transition: background 300ms linear;

    &:hover {
      background-color: color-mix(
        in srgb,
        var(--mb-color-filter) 10%,
        var(--mb-color-white)
      );
    }

    &:hover,
    &[data-expanded="true"] {
      .FilterCountChip {
        color: var(--mb-color-text-selected);
        background-color: var(--mb-color-filter);
      }
    }
  }
}

.FilterCountChip {
  font-size: 0.6875rem;
  border-radius: 10px;
  line-height: 1rem;
  padding-inline: 0.5rem;
  color: var(--mb-color-text-primary);
  background-color: color-mix(
    in srgb,
    var(--mb-color-filter) 15%,
    var(--mb-color-white)
  );
}
